<template>
  <view class="container-box">
    <!-- 头像区域 -->
    <view class="top-container">
      <view class="top-img-box">
        <image class="top-img" :src="userInfo.avatarUrl" mode=""></image>
      </view>
      <text class="top-text">{{userInfo.nickName}}</text>
      <!-- 导航区域 -->
      <view class="nav-bar">
        <view class="nav-bar-item" @click="gotoOrder">
          <image
            src="http://m.qpic.cn/psc?/V507Fudi3ynqif227b163CSAaG47kgxx/ruAMsa53pVQWN7FLK88i5jmTFY9lxkfxA.276Zizr2vD5OfuOIsgiW5yIqKdt*GOi1NDjrDwXO5xzCDM5DTZ*Mqjxyv7gc4HSapHA6S7v9o!/b&bo=yADIAAAAAAADFzI!&rf=viewer_4"
            mode=""></image>
          <text>我的预约</text>
        </view>
        <view class="nav-bar-item" @click="volunteerCenter">
          <image
            src="http://m.qpic.cn/psc?/V507Fudi3ynqif227b163CSAaG47kgxx/ruAMsa53pVQWN7FLK88i5jmTFY9lxkfxA.276Zizr2vy8JM89UQrMEBIW4j0YTm2TRzg8Fp5QhPv4WLPSJiZ5hJca93scNdOX6gJXiDA0Ps!/b&bo=yADIAAAAAAADFzI!&rf=viewer_4"
            mode=""></image>
          <text>志愿中心</text>
        </view>
        <view class="nav-bar-item" @click="expressCheck">
          <image
            src="http://m.qpic.cn/psc?/V507Fudi3ynqif227b163CSAaG47kgxx/ruAMsa53pVQWN7FLK88i5qtKVZXWOGnBA5GbrUZmPBK59u.ZvaSnJ4Enro0RLT5pFtfaNCCOIgrvEHAA489e.f.sHIRROclm5U4aOzGc6HM!/b&bo=yADIAAAAAAADFzI!&rf=viewer_4"
            mode=""></image>
          <text>快递查询</text>
        </view>
      </view>
    </view>

    <!-- 公告区-->
    <view class="notice">
      <Top-Notice></Top-Notice>
    </view>
    <!-- 分组模块区 -->
    <view class="function">

      <u-cell-group>
        <u-cell icon="map" title="地址管理" isLink url="/subpkg/addressManage/addressManage"></u-cell>
        <u-cell icon="server-man" title="联系社区" isLink url="/subpkg/connectCommunity/connectCommunity"></u-cell>
        <u-cell icon="setting-fill" title="退出登录" isLink url="" @click="logout"></u-cell>
      </u-cell-group>

    </view>
  </view>

</template>

<script>
  import {
    mapMutations,
    mapState
  } from 'vuex'
  export default {
    name: "M-Home",
    data() {
      return {};
    },
    computed: {
      ...mapState('m_volunteer', ['token_v'])
    },
    methods: {
      ...mapMutations('m_user', ['updateToken', 'updateUserInfo']),
      ...mapMutations('m_volunteer', ['updateToken_v', 'updateVolunteerInfo']),
      // 退出登录
      logout() {
        uni.showToast({
          title: '退出成功',
          icon: 'success'
        })
        // 将微信用户的信息清理干净
        this.updateToken('')
        this.updateUserInfo('{}')
        // 将志愿者信息清理干净
        this.updateToken_v("")
        this.updateVolunteerInfo('{}')
      },
      // 进入自愿中心
      volunteerCenter() {
        if (this.token_v == "") {
          return uni.$showMsg('请先注册成为志愿者！')
        } else {
          // 跳转页面到志愿中心
          uni.navigateTo({
            url: ".//subpkg/volunteer-centeer/volunteer-centeer"
          })
        }
      },
      // 预约中心
      gotoOrder() {
        uni.navigateTo({
          url: ".//subpkg/order/order"
        })
      },
      // 快递查询
      expressCheck() {
        uni.navigateTo({
          url: ".//subpkg/check/check"
        })
      }
    },
    computed: {
      ...mapState('m_user', ['userInfo'])
    }
  }
</script>

<style lang="scss">
  page {
    background-color: #F4F4F4;

    .top-container {
      height: 200px;
      border-top: 1px solid #efefef;
      background-color: #7cb717;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      position: relative;

      .top-img-box {
        height: 100px;
        width: 100px;
        background-color: white;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;

        .top-img {
          width: 90%;
          height: 90%;
          border-radius: 100%;
          border: 1px solid grey;
        }
      }

      .top-text {
        font-size: 12px;
        margin-top: 10px;
        color: white;
      }
    }

    .nav-bar {
      height: 60px;
      width: 95%;
      border: 1px solid #efefef;
      position: absolute;
      bottom: -50px;
      background-color: white;
      border-radius: 4px;
      display: flex;
      align-items: center;
      justify-content: space-around;

      .nav-bar-item {
        height: 90%;
        width: 30%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        image {
          width: 50%;
        }

        text {
          font-size: 12px;
          margin-top: 5px;
        }
      }
    }

    .notice {
      position: absolute;
      top: 260px;
      width: 100%;
    }

    .function {
      border: 1px solid #efefef;
      position: absolute;
      top: 310px;
      // height: 200px;
      width: 95%;
      left: 7px;
      background-color: white;
      border-radius: 4px;
    }
  }
</style>